<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content cbafter">
            <div class="w220 fl">
                <menu-list></menu-list>
            </div>
            <div class="w980 fr">
                <div class="h1_tit">
                    <h1>建档患者查询</h1>
                </div>
               <div class="memberlist mb20">
                    <form class="cbafter" id="search" v-on:submit.prevent="searchmethod">
                        <div class="fl">
                            <label for="">患者姓名：</label>
                            <input type="text" class="form-control" placeholder="" v-model = "param.personName">
                            <label for="">电话号码：</label>
                            <input type="text" class="form-control" placeholder="" v-model = "param.phoneNo">
                            <label for="">身份证号：</label>
                            <input type="text" class="form-control" placeholder="" v-model = "param.certificateNo">
                        </div>
                        <div class="fr">
                            <button class="btn btn-primary" type="submit">查 询</button>
                        </div>
                    </form>
                </div>
                    <div class="menuset_con_right">
                        <div class="modules">
                            <table class="table table-hover table-striped">
                                <thead>
                                    <tr>
                                        <th>患者头像</th>
                                        <th>姓名</th>
                                        <th>性别</th>
                                        <th>年龄</th>
                                        <th>电话号</th>
                                        <th>身份证号</th>
                                        <th>地址</th>
                                        <th>入会情况</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in patientsAll" track-by="$index">
                                        <td><img :src="headimg"></td>
                                        <td>{{item.personName}}</td>
                                        <td>{{item.sexText}}</td>
                                        <td>{{item.age}}</td>
                                        <td>{{item.phoneNo}}</td>
                                        <td>{{item.certificateNo}}</td>
                                        <td>{{item.address}}</td>
                                        <td v-if = "item.isMember==1">已入会</td>
                                        <td v-if = "item.isMember==0">未入会</td>
                                        <td v-if = "item.isMember==0"><button class="btn btn-success" type="submit" @click = "turnInto(item)">入会</button></button></td>
                                        <td v-if = "item.isMember==1"></td>
                                    </tr>
                                    <!--  <tr>
                                        <td colspan="7">
                                            <div class="form-group" _v-b33c703c="">
                                                <button class="default blue center" _v-b33c703c="">保存</button>
                                            </div>
                                        </td>
                                    </tr> -->
                                    <tr v-if="ishide">
                                        <td colspan="9">
                                            <div class="pull-right">
                                                <!-- 分页组件: -->
                                                <boot-page v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param" ></boot-page>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
var headimg = require("assets/img/cs2.jpg");
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
import Public from 'assets/public.js'
import bootPage from 'components/BootPage.vue'
export default {
    data() {
            return {
                lenArr: [10, 20, 50], // 每页显示长度设置
                pageLen: 5, // 可显示的分页数
                headersparam: {
                    "X-Service-Id": "coms.mpiDataRecordsService",
                    "X-Service-Method": "queryMpiRecordsList",
                },
                param: {
                    phoneNo:"",
                    certificateNo:"",
                    personName:""
                },
                ishide: false,
                patientsAll:[],
                headimg:headimg
            }
        },
        computed: {

        },
        components: {
            moduleHead, menuList, bootPage
        },
        ready() {
            var that = this;
            //获取产品名称列表 
            $.when(Public.commonajax("base.tenantProductsService", "findProducts", "[]"))
                .done(function(res) {
                    if (res.code == 200) {
                        that.prolists = res.body;
                        that.param.code = that.prolists[0].code;

                        that.getrelatemodule();


                    }

                });
            

        },
        methods: {

            // 列表页面刷新按钮
            refresh() {
                    this.$refs.page.refresh()
                },
                getrelatemodule(item, event) {
                    if (event) {
                        this.param.code = item.code;
                        $(event.target).closest('ul').find("p,dd").removeClass('cur').end().end().addClass("cur");

                    }

                    if (this.ishide) {
                        this.refresh();
                    } else {
                        this.ishide = true;
                    }


                },
            searchmethod:function(){
                this.$nextTick(function() {
                    this.refresh();
                })
            },
            turnInto:function(item){
                location.href = './addmember.html?num=' + item.certificateNo + '&type='+item.certificateType+'&click='+1;
            }
        
        },
        events: {
            // 分页列表数据
            'data' (data) {
                this.patientsAll = data;
            },
        },
        watch: {

        }
            
}
</script>
<style scoped>
.menuset_con {
    width: 950px;
    min-height: 644px;
    height: auto!important;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding-top: 30px;
    background-color: #fff;
}


.products .tit {
    background: #f8f8f8;
    
}

.products .tit h2 {
    border-left: 5px solid #00c484;
    line-height: 20px;
    font-size: 16px;
    padding: 0 10px;
    height: 20px;
}

.products,
.modules {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.products ul {
    padding: 20px;
}

.products li {
    background: url(../../assets/img/drop.png) no-repeat left 8px;
    padding-left: 15px;
}

.products li dl {
    margin-left: 20px;
}

.products li dd,
.products li p {
    line-height: 28px;
    height: 28px;
}

.products li dd.cur,
.products li p.cur {
    background: #ccc
}

.products li dd:hover,
.products li p:hover {
    cursor: pointer;
}

.modules table th {
    text-align: center;
}

.modules table td {
    
    text-align: center
}
.modules table td {
    
    vertical-align: middle;
}

.modules table td:nth-child(7) {
  width: 100px;
}

.modules table td:nth-child(6) {
    width: 100px;
}

.modules table tbody td:nth-child(1) {
    width: 100px;
}
table{
    margin-bottom: 0;
}
table img{
    border-radius: 50%
}
label{
    margin-right: 10px;
}
input{
    color: #666666;
    padding-left: 10px;
}
.search{
    margin-bottom: 10px;
}
.search button{
    display: inline-block;
}
.memberlist{
    margin-bottom: 10px;
}
.memberlist form.cbafter .fl {
    width: 850px
}

.memberlist form.cbafter label {
    font-weight: normal;
    color: #999
}

.memberlist form.cbafter input,
.memberlist form.cbafter select {
    display: inline-block;
    width: 150px;
    border: none;
    border-bottom: 1px dashed #ccc;
    box-shadow: none;
    color: #333
}
</style>
